{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">

    <title>Document</title>
    <style>
        .layui-form-label {
            width: 120px !important;
            text-align: center !important;
        }

        .layui-input {
            width: 300px;
        }

        .layui-input-block {
            width: 500px;
        }


    </style>

</head>
<body>

<div>
    <form class="layui-form" action="" lay-filler="event" id="dataFrm">
        {% csrf_token %}
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">主机名:</label>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="required" name="hostname" required="required" autocomplete="off"
                           class="layui-input hostname">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">IP地址:</label>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="required" name="ip" required="required" autocomplete="off"
                           class="layui-input ip">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">远程端口:</label>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="required" name="port" required="required" autocomplete="off"
                           class="layui-input port" value="22">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">协议:</label>
                <div class="layui-input-block">
                    <input type="radio" name="protocol" value="1" title="ssh" checked>    <!-- checked 默认选中 -->
                    <input type="radio" name="protocol" value="2" title="telnet">

                </div>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">远程连接用户：</label>
            <div class="layui-input-block" style="width: 372px">
                <select name="remoteuser" id="remoteuser" lay-verify="required">
                    <option value="">远程连接用户</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button"
                        class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal layui-icon layui-icon-ok"
                        lay-submit lay-filter="doSubmit">添加
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-radius layui-btn-warm layui-btn-lg   layui-icon  layui-icon-refresh">
                    重置
                </button>
            </div>
        </div>
    </form>
</div>

{% csrf_token %}

<!-- 引入核心的js文件-->
<script src="{% static "layui/layui.js" %}"></script>
<script src="{% static "js/password.js" %}"></script>
<script>

    layui.use(['form', 'layer', 'password'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            password = layui.password

        // 动态获取 远程连接的用户信息
        $.ajax({
            url: 'remoteusershow',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                //console.log(data);//下面会提到这个data是什么值
                //使用循环遍历，给下拉列表赋值
                $.each(data.data, function (index, value) {
                    // console.log(value.name);
                    $('#remoteuser').append(new Option(value.name, value.name));// 下拉菜单里添加元素
                });
                layui.form.render("select");//重新渲染 固定写法
            }
        })


        //监听提交
        form.on("submit(doSubmit)", function (data) {
            // 实际使用时的提交信息
            // console.log(data)


            var hostname = $('.hostname').val();

            var ip = $('.ip').val();
            var port = $('.port').val();
            var protocol = $('input[name="protocol"]:checked').val();
            // 通过 radio 的 name  选择器

            //form.render(); //更新全部、表单数据回显

            var remoteuser = $('#remoteuser').val();
            //console.log(remoteuser)

            var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
            // 'csrfmiddlewaretoken': csrf_token  ajex跳转的必须要加上这个
            $.ajax({
                type: "post",
                url: "/addhostclass/",    // 把html输入的数值传给 后边的py代码处理
                data: {
                    "hostname": hostname,
                    "ip": ip,
                    "port": port,
                    "protocol": protocol,

                    "remoteuser": remoteuser,
                    'csrfmiddlewaretoken': csrf_token,
                },
                success(res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 6});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });
            setTimeout(function () {   // 点击提交按钮，就立马关闭 添加页面，并重新加载 主页面
                layer.closeAll("addhost.html");
                //刷新父页面
                parent.location.reload();
            }, 1000);
            return false;
        })
    });
</script>
</body>

</html>

